<template>
	<view class="lease-bill">
		<!-- Header -->
		<view class="container total-panel">
			<view class="total-box">
				<view class="total-item">
					<view class="total-title">应还金额(元)</view>
					<view class="total-count">{{ amount.due }}</view>
				</view>
				<view class="total-item">
					<view class="total-title">剩余待还金额(元)</view>
					<view class="total-count">{{ amount.returned }}</view>
				</view>
			</view>
			<!-- <view class="total-panel-tips">还款日: 每月27日</view> -->
		</view>
		
		
		<!-- Navigatior -->
		<view class="container tabs">
			<block v-for="(item, index) in tabs" :key="index">
				<view class="tabs-item" 
				  :class="{'tabs-item--active': tabCurrent === index}"
				  @tap="tabCurrent = index"
				>
					{{ item.name }}
				</view>
			</block>
		</view>
		
		
		<!-- Tabs Content -->
		<!-- 应还款 -->
		<view v-show="tabCurrent === 0" class="tabs-content">
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="bill-list">
					<block v-for="item in repayableList" :key="item.id">
						<view class="bill">
							<view class="bill-content">
								<!-- Name -->
								<view class="bill-name normal">{{ item.name }}</view>
								<!-- Price -->
								<view class="bill-price">
									<price
									  color="#333333"
									  :content="item.amount_payable" 
									  mainSize="36rpx" 
									  minorSize="24rpx" 
									  :isSuffix="false" 
									  :isPrefix="true"
									/>
								</view>
							</view>
							<view class="bill-widget">
								<!-- Time -->
								<view class="muted">{{ item.repayment_time }}</view>
								<!-- Tips -->
								<template v-if="item.tips">
									<view class="ornament">{{ item.tips }}</view>
								</template>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>

			<view class="widget">
				<view class="button-refund" @tap="isPaywayPopup = true">还款</view>
			</view>
		</view>
		
		<!-- 待还款 -->
		<view v-show="tabCurrent === 1" class="tabs-content">
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="bill-list">
					<u-checkbox-group @change="checkboxGroupChangeReturned">
						<block v-for="item in returnedList" :key="item.id">
							<view class="bill row">
								<u-checkbox :name="item.id" v-model="item.checked" shape="circle" />
								<view class="flex1">
									<view class="bill-content">
										<!-- Name -->
										<view class="bill-name normal">{{ item.name }}</view>
										<!-- Price -->
										<view class="bill-price">
											<price
											  color="#333333"
											  :content="item.amount_payable" 
											  mainSize="36rpx" 
											  minorSize="24rpx" 
											  :isSuffix="false" 
											  :isPrefix="true"
											/>
										</view>
									</view>
									<view class="bill-widget">
										<!-- Time -->
										<view class="muted">{{ item.repayment_time }}</view>
									</view>
								</view>
							</view>
						</block>
					</u-checkbox-group>
				</view>
			</scroll-view>

			<view class="widget row-between">
				<u-checkbox v-model="isCheckedAllReturned" shape="circle" @change="checkedAllReturned">
					<text class="muted">全选</text>
				</u-checkbox>
				<view class="button-refund" style="width: 296rpx;" @tap="isPaywayPopup = true">还款</view>
			</view>
		</view>
		
		<!-- 已还款 -->
		<view v-show="tabCurrent === 2" class="tabs-content">
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="bill-list">
					<block v-for="item in repaidList" :key="item.id">
						<view class="bill">
							<view class="bill-content">
								<!-- Name -->
								<view class="bill-name muted">{{ item.name }}</view>
								<!-- Price -->
								<view class="bill-price">
									<price
									  color="#999999"
									  :content="item.amount_payable"
									  mainSize="36rpx" 
									  minorSize="24rpx" 
									  :isSuffix="false" 
									  :isPrefix="true"
									/>
								</view>
							</view>
							<view class="bill-widget">
								<!-- Time -->
								<view class="muted">{{ item.repayment_time }}</view>
								<!-- Tips -->
								<template v-if="item.tips">
									<view class="ornament">{{ item.tips }}</view>
								</template>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>

			<view class="widget">
				<view class="button-refund" style="opacity: .3;">还款</view>
			</view>
		</view>
		
		

		<u-popup v-model="isPaywayPopup" mode="bottom" border-radius="20">
			<view class="payway">
				<view class="payway-title">选择支付方式</view>
				<view class="payway-list">
					<block v-for="item in paywayList" :key="item.id">
						<view class="payway-item" @tap="onPay(item.pay_way)">
							<u-icon :name="item.icon" width="48" height="48" />
							<view class="ml20">
								<view class="payway-name">{{ item.name }}</view>
								<view class="payway-extra">{{ item.extra }}</view>
							</view>
						</view>
					</block>
				</view>
				<view class="payway-cancel" @tap="isPaywayPopup = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import { repaymentBill } from '@/api/lease';
	import { 
		getPayway,
		prepay
	} from '@/api/app';
	
	export default {
		data() {
			return {
				orderID: '',					// 租赁订单ID
				tabCurrent: 1,					// tabs当前索引
				// tabs列表(样式宽度已固定，仅支持3个,需要添加请自行修改)
				tabs: [
					{
						key: 'repayable',
						name: '应还款'
					},
					{
						key: 'returned',
						name: '待还款'
					},
					{
						kay: 'repaid',
						name: '已还款'
					}
				],
				
				// 统计数据
				amount: {
					due: 0,						// 应还金额
					returned: 0,				// 待还金额
				},
				repayableList: [],				// 应还款 数据列表
				returnedList: [],				// 待还款 数据列表
				repaidList: [],					// 已还款 数据列表
				
				isCheckedAllReturned: false,	// 待还款全选
				checkedAllReturnedList: [],		// 已选中的待还款账单
				
				isPaywayPopup: false,			// 支付方式 Popup
				paywayList: [],					// 支付方式 数据列表
			}
		},
		
		methods: {
			// 获取数据并初始化
			initData() {
				// 获取应还款数据列表
				this.getRepayable();
				// 获取待还款数据列表
				this.getReturned();
				// 获取已还款数据列表
				this.getRepaid();
			},
			
			// 获取应还款数据列表
			getRepayable() {
				repaymentBill({
					id: this.orderID,
					type: 'repayable',
					action: 'info'
				}).then(res => {
					const data = res.data;
					
					this.$set(this.amount, 'due', data.amount_due);
					this.$set(this.amount, 'returned', data.amount_returned);
					this.repayableList = data.bill_list;
				});
			},
			
			// 获取待还款数据列表
			getReturned() {
				repaymentBill({
					id: this.orderID,
					type: 'returned',
					action: 'info'
				}).then(res => {
					const data = res.data;					
					this.$set(this.amount, 'due', data.amount_due);
					this.$set(this.amount, 'returned', data.amount_returned);
					
					const list = [];
					data.bill_list.map(item => list.push(Object.assign({}, item, { checked: false })));
					this.returnedList = list;
				});
			},
			
			// 获取已还款数据列表
			getRepaid() {
				repaymentBill({
					id: this.orderID,
					type: 'repaid',
					action: 'info'
				}).then(res => {
					const data = res.data;
					
					this.$set(this.amount, 'due', data.amount_due);
					this.$set(this.amount, 'returned', data.amount_returned);
					this.repaidList = data.bill_list;
				});
			},
			
			// 待还款 选中任一checkbox时触发
			checkboxGroupChangeReturned(e) {
				this.checkedAllReturnedList = e;
				const isAllCheck = this.returnedList.find(item => item.checked == false);
				isAllCheck
				  ? this.isCheckedAllReturned = false
				  : this.isCheckedAllReturned = true;
			},
			
			// 待还款全选
			checkedAllReturned() {
				if (this.isCheckedAllReturned) {					
					this.returnedList.map(val => val.checked = false);
					this.checkedAllReturnedList = [];
				} else {
					const ids = [];
					this.returnedList.map(val => {
						ids.push(val.id);
						val.checked = true;
					});
					this.checkedAllReturnedList = ids;
				}
			},
			
			// 支付
			handlePay(id, type) {
				prepay({
					from: type,
					order_id: id
				}).then(res => {
					const code = res.code;
					const data = res.data;
					
					switch(code) {
						case 1: 
							this.handleWeCahtPay(data);
							break;
						case 10001: 
							uni.showToast({ title: '还款成功', icon: 'success' });
							break;
					}
					
					this.initData();
				});
			},		
			
			// 微信支付
			handleWeCahtPay(data) {
				wxpay(data).then(res => {
					if(res == 'success') {
						uni.showToast({ title: '还款成功', icon: 'success' });
					}else {
						uni.showToast({ title: '还款失败' });
					}
				})
			},
			
			// 点击支付
			onPay(payway) {
				this.isPaywayPopup = false;
				const index = this.tabs[this.tabCurrent].key;
				
				let periodization = [];
				
				switch(index) {
					// 应还款
					case 'repayable': 
						this.repayableList.map(item => periodization.push(item.id));
						break;
					// 待还款
					case 'returned': 
						periodization = this.checkedAllReturnedList;
						break;
				}
				
				repaymentBill({
					id: this.orderID,
					type: index,
					pay_way: payway,
					action: 'submit',
					periodization_ids: periodization.join(',')
				}).then(res => {
					const data = res.data;
					const id = data.order_id;
					const type = data.from;
					this.handlePay(id, type);
				});
			}
		},
		
		onLoad(options) {
			const index = options.index || 0;
			const id = options.id;
			this.orderID = id;
			this.tabCurrent = index;
			
			// 数据初始化
			this.initData();
			
			// 获取付款方式
			getPayway().then(res => {
			    if (res.code != 1) return;
			    const data = res.data;
			    this.paywayList = data;
			});
		},
	}
</script>


<style scoped>
	.container {
		margin: 20rpx 20rpx 0 20rpx;
	}
	
	.lease-bill {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		/* overflow: hidden; */
	}
	
	.total-panel {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* height: 256rpx; */
		height: 200rpx;
		padding: 30rpx 50rpx;
		border-radius: 10px;
		background-image: linear-gradient(90deg, #24A3FF, #3187FD);
		color: #FFFFFF;
	}
	
	.total-box {
		display: flex;
	}
	
	.total-item {
		flex: 1;
	}
	
	.total-title {
		font-size: 26rpx;
	}
	
	.total-count {
		font-size: 64rpx;
		font-weight: 500;
	}
	
	.total-panel-tips {
		font-size: 26rpx;
		color: #CEE5FF;
	}
	
	.tabs {
		display: flex;
		justify-content: space-between;
	}
	
	.tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 224rpx;
		height: 72rpx;
		border-radius: 2px;
		font-size: 28rpx;
		background-color: #FFFFFF;
		color: #333333;
	}
	
	.tabs-item--active {
		box-shadow: 0 0 0 1px #24A3FF;
		background-color: #E8F6FF;
		color: #24A3FF;
	}
	
	.tabs-content {
		position: relative;
		flex: 1;
		box-sizing: border-box;
		height: 100%;
		margin-top: 20rpx;
		overflow: hidden;
	}
	
	.scroll-view {
		height: calc(100% - 120rpx);
	}
	
	.bill-list {
		padding: 0 20rpx;
	}
	
	.bill {
		padding: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}
	
	.bill:nth-child(n+2) {
		margin-top: 20rpx;
	}
	
	.bill-content {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	.bill-name {
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.bill-price {
		text-align: right;
		min-width: 136rpx;
	}
	
	.bill-widget {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 26rpx;
	}
	
	.widget {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	
	.button-refund {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 84rpx;
		border-radius: 50px;
		font-size: 32rpx;
		background-color: #24A3FF;
		color: #FFFFFF;
	}
	
	.payway {
		/* border-radius: 6px 0; */
		/* background-color: #FFFFFF; */
		/* overflow: hidden; */
		/* background-color: #01D171; */
	}
	
	.payway-title {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.payway-list {
		padding: 20rpx 24rpx;
	}
	
	.payway-item {
		display: flex;
		align-items: center;
		height: 120rpx;
	}
	
	.payway-item:nth-child(n+2) {
		border-top: 1px solid #E5E5E5;
	}
	
	.payway-name {
		font-size: 28rpx;
		font-weight: 400;
		color: #101010;
	}
	
	.payway-extra {
		font-size: 24rpx;
		color: #999999;
	}
	
	.payway-cancel {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		font-size: 32rpx;
		background-color: #F6F6F6;
		color: #333333;
	}
	
</style>
